<template>
    <div class="custom_table" ref="CustomTableRef">
        <div class="from_search" ref="fromSearch">
            <el-form :inline="true" class="demo-form-inline">
                <slot name="from_search"></slot>
            </el-form>
        </div>
        <el-table ref="multipleTableRef" v-loading="state.tableLoading" :data="state.table.data" border
            style="width: 100%;" :height="state.tableHeight" @selection-change="handleSelectionChange"
            :size="tableSize">
            <el-table-column type="selection" v-if="selection" width="55" />
            <slot name="columns"></slot>
        </el-table>
        <div ref="pagination" class="pagination">
            <el-pagination v-model:current-page="state.pagination.pageInfo.pageNo"
                v-model:page-size="state.pagination.pageInfo.pageSize" :page-sizes="state.pagination.pageSizeArr"
                background layout="total, sizes, prev, pager, next, jumper" :total="state.pagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, toRefs } from "vue"
import { ElTable, ElNotification, ElMessageBox, ElMessage } from 'element-plus'

const CustomTableRef = ref(null)
const fromSearch = ref(null)
const pagination = ref(null)

const props = defineProps({
    selection: {
        type: Boolean,
        default() {
            return true
        },
    },
    tableSize: {
        type: String,
        default() {
            return 'default'
        },
    },
    tableHeight: {
        type: Number,
    },
    orgKey: {
        type: String,
        default() {
            return 'deptId'
        },
    },
    getData: {
        type: Function,
        default() {
            return () => { }
        }
    },
    formData: {
        type: Object,
        default() {
            return {}
        }
    },
    remove: {
        type: Function,
        default() {
            return () => { }
        }
    },
    lazy: {
        type: Boolean,
        default() {
            return false
        },
    }
})

const state = reactive({
    tableHeight: props.tableHeight,
    tableLoading: false,
    searchData: { ...toRefs(props.formData) },
    selectRows: [],
    pagination: {
        pageSizeArr: [15, 30, 50, 100],
        pageInfo: {
            pageNo: 1,
            pageSize: 15,
        },
        total: 0,
    },
    table: {
        data: []
    }
})

const setTableHeight = () => {
    if (!props.tableHeight) {
        nextTick(() => {
            state.tableHeight = CustomTableRef.value.offsetHeight  - fromSearch.value.offsetHeight - pagination.value.offsetHeight
        })
    }
}

const handleSizeChange = () => {
    fetchData()
}
const handleCurrentChange = (val) => {
    state.pagination.pageInfo.pageNo = val
    fetchData()
}

const handleSelectionChange = (val) => {
    state.selectRows = val
}

const treeNodeClick = (node) => {
    state.searchData[props.orgKey] = node.id
    queryData()
}

const fetchData = async () => {
    state.tableLoading = true
    const {
        records, total
    } = await props.getData(state.searchData, state.pagination.pageInfo)
    state.table.data = records
    state.pagination.total = total
    state.tableLoading = false

}
const queryData = () => {
    state.pagination.pageInfo.pageNo = 1
    fetchData()
}

const getSelection = () => {
    return state.selectRows
}

const handleDelete = (row) => {
    if (row && row.id) {
        ElMessageBox.confirm(
            '你确定要删除当前项吗?',
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(async () => {
            await props.remove([row.id])
            ElNotification({
                title: '提示',
                message: '删除成功',
                type: 'success',
            })
            fetchData()
        })
    } else {
        if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id)
            ElMessageBox.confirm(
                '你确定要删除选中项吗?',
                '温馨提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(async () => {
                await props.remove(ids)
                ElNotification({
                    title: '提示',
                    message: '删除成功',
                    type: 'success',
                })
                fetchData()
            })
        } else {
            ElMessage({
                type: 'warning',
                message: '未选中任何行',
            })
        }
    }
}


onMounted(() => {
    setTableHeight()
    if (!props.lazy) {
        fetchData()
    }
})


defineExpose({ queryData, handleDelete, treeNodeClick, getSelection })
</script>
<style scoped lang="scss">
.custom_table {
    height: 100%;
}

.from_search {
    // padding-left: 12px;
}

:deep(.el-form-item) {
    margin-bottom: 10px !important;
    margin-right: 10px !important;
}

.pagination {
    padding: 15px 0 5px 0;
    display: flex;
    justify-content: center;
}

.from_search {
    :deep(.el-input) {
        width: 200px;
    }
}
</style>
